<template>
  <div ref="canvas"></div>
</template>

<script lang="ts" setup>
import * as THREE from 'three';
import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls';
import { ref, onMounted } from "vue";
// @ts-ignore
import about from "@/assets/about.png";

// 画布
const canvas = ref<any>('');
// 场景
const scene = new THREE.Scene();
// 几何对象
const plane = new THREE.PlaneGeometry(88, 88);
// 纹理贴图
const texture = new THREE.TextureLoader().load(about);
// 材质
const material = new THREE.MeshLambertMaterial({
  map: texture,
  side: THREE.DoubleSide,
  transparent: true, // 开启透明
});
// 网格模型Mesh
const mesh = new THREE.Mesh(plane, material);
mesh.rotateX(-Math.PI / 2);
mesh.position.y += 10;
scene.add(mesh);
// 添加一个辅助网格地面
const gridHelper = new THREE.GridHelper(300, 25, 0x004444, 0x004444);
scene.add(gridHelper);
// 光源
const ambientLight = new THREE.AmbientLight(0xffffff, 0.8);
scene.add(ambientLight);
// 相机
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 1, 2000);
camera.position.set(200, 200, 200);
camera.lookAt(mesh.position);
// 渲染器
const renderer = new THREE.WebGLRenderer({
  antialias: true,
})
renderer.setClearColor(0xffffff);
renderer.setPixelRatio(window.devicePixelRatio);
renderer.setSize(window.innerWidth, window.innerHeight);
// 渲染函数
const render = () => {
  renderer.render(scene, camera);
  requestAnimationFrame(render);
};
// 相机控件
const orbitControl = new OrbitControls(camera, renderer.domElement);
orbitControl.update();

onMounted(() => {
  canvas.value.appendChild(renderer.domElement);
  render();
})

</script>
